<template>
	<div class="side-menu-wrapper">
		<slot></slot>
		<Menu ref="menu" :active-name="$route.name" :open-names="openNames" v-show="!collapsed" width="auto" theme="dark" @on-select="handleSelect">
			<template  v-for="item in list">
				<re-submenu
					v-if="item.children"
					:key="`menu_${item.name}`"
					:name="item.name"
					:parent="item"
				>
				</re-submenu>
				<menu-item
					v-else
					:key="`menu_${item.name}`"
					:name="item.name"
				>
					<Icon :type="item.icon" />
					{{ item.meta.title }}
				</menu-item>
			</template>
		</Menu>
		<div v-show="collapsed" class="drop-wrapper">
			<template v-for="item in list ">
				<re-dropdown @on-select="handleSelect"
					 v-if="item.children"
					 icon-color="#fff"
					 :show-title="false"
					 :key="`drop_${item.name}`"
					 :parent="item"
				>
				</re-dropdown>
				<Tooltip v-else
								 transfer
								 :content="item.title"
								 placement="right"
								 :key="`drop_${item.name}`"
				>
				<span  class="drop-menu-span" @click="handleSelect(item.name)">
					<Icon :type="item.icon" color="#fff" :size="20"></Icon>
				</span>
				</Tooltip>
			</template>
		</div>
	</div>
</template>
<script>
	import ReSubmenu from "./re-submenu.vue";
	import ReDropdown from "./re-dropdown.vue";
	import { mapState } from "vuex"
	import { getOpenArrayByName } from '@/lib/util'
	export default {
		name: 'SideMenu',
		components: {ReDropdown, ReSubmenu},
		props: {
			collapsed: {
				type: Boolean,
				default: false
			},
			list: {
				type: Array,
				default: () => []
			}
		},
		computed: {
			...mapState({
				routers: state => state.router.routers
			}),
			openNames () {
				return getOpenArrayByName(this.$route.name, this.routers);
			}
		},
		watch: {
			openNames () {
				this.$nextTick(() => {
					this.$refs.menu.updateOpened()
				})
			}
		},
		methods: {
			handleSelect (name) {
				this.$router.push({
					name,
				});
			},
			handleClick (name) {
				console.log(name)
			}
		}
	}
</script>
<style scoped lang="less">
	.side-menu-wrapper{
		width: 100%;
		.ivu-tooltip, .drop-menu-span{
			display: block;
			width: 100%;
			text-align: center;
			padding: 5px 0;
		}
		.drop-wrapper > .ivu-dropdown{
			display: block;
			padding: 5px;
			margin: 0 auto;
		}
	}
</style>
